<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点餐系统</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <link rel="shortcut icon" href="./favicon.ico">
    <link rel="stylesheet" href="./style/login/base.css">
    <link rel="stylesheet" href="./style/login/normalize.css">
    <link rel="stylesheet" href="./style/login/index.css">
    <script type="text/javascript" src="./plugins/jQuery/jquery-3.6.0.js"></script>
    <script src="./plugins/vue/vue.js"></script>
    <script type="text/javascript" src="./plugins/axios/axios.js"></script>
    <script type="text/javascript" src="./js/request.js"></script>
    <link rel="stylesheet" href="./plugins/element-ui/index.css">
    <script src="./plugins/element-ui/index.js"></script>

    <style>
        #table-select {
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 项部导航 -->
    <div class="xtx_topnav">

        <span class="span1">
                  退出登录
                </span>
        <div class="wrapper">
            <!-- 顶部导航 -->
            <ul class="xtx_navs">
                <li>
                    <a href="./pages/login/register.html">免费注册</a>
                </li>
                <li >
                    <a href="./pages/login/login.html">请先登录</a>
                </li>
                <li v-else>
                    <a href=""></a>
                </li>
                <li>
                    <a href="javascript:;">我的订单</a>
                </li>
                <li>
                    <a href="javascript:;">会员中心</a>
                </li>
                <li>
                    <a href="javascript:;">帮助中心</a>
                </li>
                <li>
                    <a href="javascript:;">在线客服</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 头部 -->
    <div class="xtx_header clearfix">
        <div class="wrapper">
            <!-- 网站Logo -->
            <h1 class="xtx_logo"><a href="/">点餐系统</a></h1>
            <!-- 主导航 -->
            <div class="xtx_navs">
                <ul class="clearfix">
                    <li v-for="(item,index) in menu">
                        <a>点餐专区</a>
                    </li>

                </ul>
            </div>
            <!-- 站内搜索 -->
            <div class="xtx_search clearfix">
                <!-- 购物车 -->
                <a href="./pages/cart/shoppingCart.html" class="xtx_search_cart sprites">
                    <i></i>
                </a>
                <!-- 搜索框 -->
                <div class="xtx_search_wrapper">
                    <input type="text" placeholder="搜一搜" >
                </div>
            </div>
        </div>
    </div>
    <!-- 添加餐桌选择区域 -->
    <h1>选择餐桌</h1>
    <select id="table-select">
        <option value="">请选择餐桌</option>
    </select>


    <!-- 分类及焦点图 -->
    <div class="xtx_entry">
        <div class="wrapper">
            <!-- 分类 -->
            <div class="xtx_category">
                <!-- 顶级分类 -->
                <ul class="xtx_category_super">
                    <li v-for="(item,index) in menu">
                        <a style="text-align:center;">点此进入</a>
                        <i class="sprites"></i>
                    </li>
                </ul>
                <!-- 子分类 -->
                <div class="xtx_category_subset">
                </div>
            </div>
            <!-- 轮播图 -->

            <div class="xtx_banner">
                <ul>
                    <template>
                        <el-carousel trigger="click" :interval="5000" arrow="always" height="500px">
                            <el-carousel-item v-for="item in 4" :key="item">
                                <li>
                                    <a>
                                        <img src="images/90.jpg" alt="">
                                    </a>
                                </li>
                            </el-carousel-item>
                        </el-carousel>
                    </template>
                </ul>
            </div>
        </div>
    </div>
    <!-- 新鲜餐品 -->
    <div class="xtx_goods_new xtx_panel">
        <div class="wrapper">
            <!-- 面板头部 -->
            <div class="xtx_panel_header">
                <h3>新鲜餐品<small>菜品推荐 品质靠谱</small></h3>
                <a style="cursor: pointer;" class="more">
                    查看全部<i class="sprites"></i>
                </a>
            </div>
            <!-- 菜名列表 -->
            <div class="xtx_panel_goods_1">
                <a href="javascript:;">
                    <img src="images/fresh_dish.jpg" alt="新鲜餐品图片">
                </a>
                <!-- v-for 循环渲染新餐推荐 -->
                <a href="javascript:;" v-for="item in goodBooks">
                    <img :src=`http:${item.imageName}` alt="">
                    <p class="name">汉堡套餐</p>
                    <span class="name1">
              &nbsp;&nbsp;&nbsp;&nbsp;
              <span class="name2"></span>
            </span>
                    <span class="price"><small>￥</small>68</span>
                </a>
            </div>
        </div>
    </div>
    <!--低价专区 -->
    <div class="xtx_goods_seckill xtx_panel">
        <div class="wrapper clearfix">
            <!-- 面板头部 -->
            <div class="xtx_panel_header">
                <h3>低价专区<small>每日精品 限时低价</small></h3>
                <a href="javascript:;" class="more">
                    查看全部<i class="sprites"></i>
                </a>
            </div>
            <!-- 倒计时 -->
            <div class="countdown">
                <p class="next">下一场 8:00开始</p>
                <p class="title">美食限时抢购</p>
                <p class="tips">18:00<small>点场 倒计时</small></p>
                <p class="clock">
                    <span>00</span>
                    <i>:</i>
                    <span>25</span>
                    <i>:</i>
                    <span>20</span>
                </p>
            </div>
            <!-- 餐品列表 -->
            <ul class="xtx_goods">
                <li v-for="item in lowPriceBooks">
                    <a href="javascript:;">
                        <div class="img-box">
                            <img :src="item.imageName">
                        </div>
                        <p class="name"
                           style="width: 80%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin: 20px auto">
                            全场美食</p>

                        <p class="price" style="color: red">
                            <span><small>￥</small>统统八折</span>
                            <span style="text-decoration: line-through"><small></small></span>
                        </p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 公共底部 -->
    <div class="xtx_footer">
        <div class="wrapper">
            <!-- 联系我们 -->
            <div class="contact clearfix">
                <dl>
                    <dt>客户服务</dt>
                    <dd class="chat">在线客服</dd>
                    <dd class="feedback">问题反馈</dd>
                </dl>
                <dl>
                    <dt>关注我们</dt>
                    <dd class="weixin">公众号</dd>
                    <dd class="weibo">微博</dd>
                </dl>
                <dl>
                    <dt>下载APP</dt>
                    <dd class="qrcode">
                        <img src="./uploads/qrcode.jpg">
                    </dd>
                    <dd class="download">
                        <span>扫描二维码</span>
                        <span>立马下载APP</span>
                        <a href="javascript:;">下载页面</a>
                    </dd>
                </dl>
                <dl>
                    <dt>服务热线</dt>
                    <dd class="hotline">
                        400-0000-000
                        <small>周一至周日 8:00-18:00</small>
                    </dd>
                </dl>
            </div>
        </div>
        <!-- 其它 -->
        <div class="extra">
            <div class="wrapper">
                <!-- 口号 -->
                <div class="slogan">
                    <a href="javascript:;" class="price">价格亲民</a>
                    <a href="javascript:;" class="express">品质保障</a>
                    <a href="javascript:;" class="quality">物流快捷</a>
                </div>
                <!-- 版权信息 -->
                <div class="copyright">
                    <p>
                        <a href="javascript:;">关于我们</a>
                        <a href="javascript:;">帮助中心</a>
                        <a href="javascript:;">售后服务</a>
                        <a href="javascript:;">配送与验收</a>
                        <a href="javascript:;">商务合作</a>
                        <a href="javascript:;">搜索推荐</a>
                        <a href="javascript:;">友情链接</a>
                    </p>
                    <p>CopyRight &copy; 宝鸡文理学院</p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const tableSelect = document.getElementById('table-select');
        const totalTables = 8; // 设置餐桌数量为 8

        // 动态生成下拉菜单选项
        for (let i = 1; i <= totalTables; i++) {
            const option = document.createElement('option');
            option.value = i;
            option.textContent = `餐桌 ${i}`;
            tableSelect.appendChild(option);
        }

        // 处理选择事件
        tableSelect.addEventListener('change', function() {
            const selectedTableNumber = this.value;
            if (selectedTableNumber) {
                console.log(`选中的餐桌号: ${selectedTableNumber}`);
                // 你可以在这里添加代码，将选中的餐桌号发送到服务器
            }
        });
    });
</script>
</body>
</html>